<template>
  <div :style="{ ...styles.backgroundStyles }" class="position-full">
    <!-- 信号源 -->
    <div class="box">
      <div class="flex-box">
        <p class="title  mar-rgt-10" :style="{ ...styles.textStyles,  ...textStyle('large') }">
          {{widget.UI.data.inputsName}}</p>
        <p><i class="iconfont icon-ArrowLeft" :style="textStyle('small')"></i> <span
          class="pad-lft-rgt-10" :style="textStyle('normal')"><i
          class="mar-rgt-10">上一页</i>1/{{Math.ceil(widget.UI.data.inputs.length / widget.UI.data.itemPageCount) || 1}}  <i
          class="mar-lft-10">下一页</i></span><i
          class="iconfont icon-ArrowRight" :style="textStyle('small')"></i></p>
      </div>

      <div class="grid-box" :style="gridStyle('input')">
        <div class="box-item " v-for="(item, index) in widget.UI.data.inputs.slice(0,widget.UI.data.itemPageCount)"
             :key="index">
          <div
            :style="{ 'width': widget.UI.data.itemSize? styles.widthStyles.width:styles.inputItemStyles.width,
            'height': widget.UI.data.itemSize? styles.widthStyles.height:styles.inputItemStyles.height,
            ...styles.componentStyles }">
            <video :src="item.url" controls class="width-100 height-100 videoElement"
                   :poster="`${assetBaseUrl}/file/download/${widget.UI.data.itemCoverImage}`"></video>
          </div>
          <p class="flex-item" :style="{  ...styles.contentStyles, ...textStyle('normal') }">{{item.name}}</p>
        </div>
      </div>
    </div>
    <!-- 显示设备 -->
    <div class="box">
      <div class="flex-box">
        <p class="title mar-rgt-10" :style="{ ...styles.textStyles,  ...textStyle('large') }">
          {{widget.UI.data.outputsName}}</p>
        <p><i class="iconfont icon-ArrowLeft" :style="textStyle('small')"></i> <span
          class="pad-lft-rgt-10" :style="textStyle('normal')"> <i class="mar-rgt-10">上一页</i>1/{{
            Math.ceil(widget.UI.data.outputs.length / widget.UI.data.itemPageCount) || 1
          }}  <i class="mar-lft-10">下一页</i></span><i
          class="iconfont icon-ArrowRight" :style="textStyle('small')"></i></p>
      </div>
      <div class="grid-box" :style="gridStyle('output')">
        <div class="box-item " v-for="(item, index) in widget.UI.data.outputs.slice(0,widget.UI.data.itemPageCount)"
             :key="index">
          <div
            :style="{ 'width': widget.UI.data.itemSize? styles.widthStyles.width:styles.outputItemStyles.width,
            'height': widget.UI.data.itemSize? styles.widthStyles.height:styles.outputItemStyles.height,
             ...styles.componentStyles}">
            <video :src="item.url" controls class="width-100 height-100 videoElement"
                   :poster="`${assetBaseUrl}/file/download/${widget.UI.data.itemCoverImage}`"></video>
          </div>
          <p class="flex-item" :style="{  ...styles.contentStyles, ...textStyle('normal') }">{{item.name}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

  import {mapState} from 'vuex';
  import {formatColor, formatFontSize} from '@/utils';
  import {assetBaseUrl} from '@/config/env';

  export default {
    name: 'DistributeMatrix',
    props: {
      widget: {
        type: Object,
        default: () => {
          return {};
        }
      }
    },
    data() {
      return {
        assetBaseUrl: assetBaseUrl,
        formatFontSize: formatFontSize
      };
    },
    computed: {
      ...mapState({
        activeTheme: state => state.ide.activeTheme,
      }),
      state() {
        if (!this.widget || !this.widget.UI.state) return;
        return this.widget.getCurrentState();
      },
      styles() {
        const {
          backgroundColor = '',
          componentColor = '',
          textColor = '',
          contentColor = '',
          itemSize = {},
          inputItemSize = {},
          outputItemSize = {},
          itemCoverImage = '',
          textSize=16
        } = this.widget.UI.data
        const backgroundStyles = {};
        const componentStyles = {};
        const textStyles = {};
        const contentStyles = {};
        const inputItemStyles = {};
        const outputItemStyles = {};
        const widthStyles = {};
        if (itemCoverImage) {
          //  backgroundStyles.backgroundImage = `url(${assetBaseUrl}/file/download/${itemCoverImage})`;
          backgroundStyles.backgroundSize = 'cover';
          backgroundStyles.backgroundPosition = 'center';
          backgroundStyles.backgroundRepeat = 'no-repeat';
        }
        backgroundColor && (backgroundStyles.backgroundColor = formatColor(backgroundColor, this.activeTheme));
        componentColor && (componentStyles.backgroundColor = formatColor(componentColor, this.activeTheme));
        textColor && (textStyles.color = formatColor(textColor, this.activeTheme));
        contentColor && (contentStyles.color = formatColor(contentColor, this.activeTheme));
        textSize && (contentStyles.fontSize = textSize + 'px');
        itemSize && (widthStyles.width = itemSize.width + 'px');
        itemSize && (widthStyles.height = itemSize.height + 'px')
        inputItemSize && (inputItemStyles.width = inputItemSize.width + 'px');
        inputItemSize && (inputItemStyles.height = inputItemSize.height + 'px')
        outputItemSize && (outputItemStyles.width = outputItemSize.width + 'px');
        outputItemSize && (outputItemStyles.height = outputItemSize.height + 'px')
        return {
          backgroundStyles: backgroundStyles,
          componentStyles: componentStyles,
          textStyles: textStyles,
          contentStyles: contentStyles,
          widthStyles: widthStyles,
          inputItemStyles: inputItemStyles,
          outputItemStyles: outputItemStyles
        };
      },
      gridStyle() {
        return (type) => {
          const {
            itemSpace = '20',
            itemVSpace = '20',
            itemSize = {},
            inputItemSize = {},
            outputItemSize = {}
          } = this.widget.UI.data;
          let gridTemplateColumns;
          if (type === 'input') {
            gridTemplateColumns = inputItemSize.width ? `repeat(auto-fit, ${inputItemSize.width + 'px'})` : `repeat(auto-fit, ${itemSize.width + 'px'})`
          } else {
            gridTemplateColumns = outputItemSize.width ? `repeat(auto-fit, ${outputItemSize.width + 'px'})` : `repeat(auto-fit, ${itemSize.width + 'px'})`
          }
          return {
            gridRowGap: itemVSpace + 'px',
            gridColumnGap: itemSpace + 'px',
            gridTemplateColumns: gridTemplateColumns,
          }
        };
      },
      textStyle() {
        return (type) => {
          const {textSize = 16} = this.widget.UI.data;
          return {
            'fontSize': formatFontSize(type, textSize) + 'px',
          }
        };
      },
    },
  };
</script>

<style scoped lang="less">
  .position-full {
    background: #f5f5f5;
    padding-left: 20px;
    box-sizing: border-box;
  }

  .box {
    width: 100%;
    height: 50%;
    overflow: auto;

  }

  .title {
    color: #333;
    font-weight: bold;
  }

  .flex-item {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .grid-box {
    display: grid;
    grid-auto-flow: row;
    width: 100%;

    .box-item {
      border-radius: 15px;
      border: 1px solid transparent;

      .videoElement {
        object-fit: fill;
      }
    }
  }

  .flex-box {
    display: flex;
    align-items: center;
    //gap: 20px;
    //flex-wrap: wrap;
    width: 100%;
  }
</style>
